<template>
<div class="StuInfManage">
    <v-headMenu></v-headMenu>

    <div class="notice">
      <div class="edit" v-show="isEdit">
        <h1>修改题目</h1>
          <el-form ref="form" :model="editData" label-width="80px" style="width:580px;margin: 0 auto">
            <el-form-item label="题 干">
              <el-input style="width:500px" type="textarea" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请输入内容" v-model="editData.stem"></el-input>
            </el-form-item>
            <el-form-item label="答 案">
              <el-input style="width:300px" type="textarea" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请输入内容" v-model="editData.answer"></el-input>
            </el-form-item>
            <el-form-item label="解 析">
              <el-input style="width:500px" type="textarea" :autosize="{ minRows: 4, maxRows: 10}" placeholder="请输入内容" v-model="editData.analysis"></el-input>
            </el-form-item>
          </el-form>
          <van-button round type="info" color="#055383" @click="edit" style="width:80px;margin:10px 20px 0 0">确认</van-button>
          <van-button round type="info" color="#055383" @click="back" style="width:80px;margin:10px 0 0 20px">取消</van-button>
      </div>
      <div class="del" v-show="isDel">
        <h1>删除题目</h1>
        <van-button round type="info" color="#055383" @click="del" style="width:80px;margin:10px 20px 0 0">确认</van-button>
        <van-button round type="info" color="#055383" @click="back" style="width:80px;margin:10px 0 0 20px">取消</van-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column width=100 label="题目编号" prop="topicNum"></el-table-column>
          <el-table-column width=100 label="学科" prop="subject"> </el-table-column>
          <el-table-column width=100 label="题目类型" prop="topicType" 
            :filters="[{ text: '单选题', value: '单选题' }, { text: '判断题', value: '判断题' }, { text: '填空题', value: '填空题' }, { text: '综合题', value: '综合题' }]"
            :filter-method="filterHandler">
          </el-table-column>
          <el-table-column width=450 label="题干" prop="stem" show-overflow-tooltip> </el-table-column>
          <el-table-column width=150 label="答案" prop="answer" show-overflow-tooltip> </el-table-column>
          <el-table-column width=150 label="解析" prop="analysis"> </el-table-column>
          <el-table-column width=200 align="right">
             <template slot="header" slot-scope="scope">
              <el-input v-model="searchData" size="mini" placeholder="输入关键字搜索" @input='search()' class="input-with-select">
                <el-select v-model="searchType" slot="prepend" placeholder="题号" style="width:60px;">
                  <el-option label="题 号" value="topicNum"></el-option>
                  <el-option label="学 科" value="subject"></el-option>
                  <el-option label="题 干" value="stem"></el-option>
                </el-select>  
              </el-input>
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="count"
          style="padding: 0px 5px">
        </el-pagination>
      </div>

    </div>
</div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getQueBank, edit, del } from "../../api/user";
import { Toast } from "vant";
export default {
  data (){
    return {
      queBankData: [],
      tableData: [],
      editData: {},
      searchData: '',
      searchType: 'topicNum',
      isEdit: false,
      isDel: false,

      offset: 0,
      limit: 10,
      count: 0,
      currentPage: 1,
    }
  },
  created (){
    this.getQueBank()
  },
  components: {
      'v-headMenu': headMenu
  },
  methods: {
    async getQueBank(condition){
      await getQueBank(condition)
        .then((res) => {
          // console.log(res);
          this.queBankData = res.queBank
          this.count = this.queBankData.length
          this.tableData = this.queBankData.slice(0, 10)
        })
    },
    search(){
      // console.log([this.searchData]);
      this.getQueBank({
        searchType: this.searchType,
        searchData: this.searchData,
        })
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.isEdit = true
      this.editData = row
    },
    handleDelete(index, row) {
        // console.log(index, row);
      this.isDel = true
      this.editData = row
    },
    async edit(){
      console.log(this.editData);
      await edit(this.editData)
        .then((res) => {
          Toast(res.msg);
        })
      this.back()
    },
    async del(){
      console.log(this.editData);
      await del(this.editData)
        .then((res) => {
          Toast(res.msg);
        })
      this.getQueBank()
      this.back()
    },
    back() {
      this.isEdit = false
      this.isDel = false
      this.editData = {}
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.offset = (val - 1)*this.limit;
      this.tableData = this.queBankData.slice(this.offset, this.offset + 10)
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
  },
}
</script>

<style lang='stylus'>
.StuInfManage
  color #666
  flex 1 1 100%
  display block
.notice
  margin 0 10px
  border 1px solid #CCCCCC
  .el-input__inner
    padding-left 5px
    padding-right 10px
  .edit
    position absolute
    width 800px
    height 600px
    background-color #50a3a2
    z-index 99
    left calc(50% - 300px)
    top calc(50% - 280px)
    box-shadow 10px 10px 30px #888
    border-radius 20px
    color white
    text-align center
</style>